<template>
    <div class="pager-container" v-if="pagerNumber > 1">
        <!-- 首页和上一页 -->
        <a @click="handClick(1)" :class="{ disabled: current === 1 }">首页</a>
        <a @click="handClick(current - 1)" :class="{ disabled: current === 1 }"
            >上一页</a
        >

        <!-- 中间的数字 -->
        <a
            @click="handClick(n)"
            v-for="(n, i) in nums"
            :key="i"
            :class="{ active: n === current }"
            class="numItem"
            >{{ n }}</a
        >

        <!-- 下一页和最后一页 -->
        <a
            @click="handClick(current + 1)"
            :class="{ disabled: current === pagerNumber }"
            >下一页</a
        >
        <a
            @click="handClick(pagerNumber)"
            :class="{ disabled: current === pagerNumber }"
            >尾页</a
        >
    </div>
</template>


<script>
import { createLogger } from 'vuex';
export default {
    props: {
        current: {  // 当前显示那一页
            type: Number,
            default: 1,
        },
        total: {    // 总共有多少条数据
            type: Number,
            default: 0,
        },
        limit: {   // 每页显示多少条
            type: Number,
            default: 10,
        },
        visiableNumber: {   // 在分页栏上显示多少项
            type: Number,
            default: 10,
        },
    },
    computed: {
        pagerNumber() {     // 当前数据总条数，需要显示最多的分页项
            return Math.ceil(this.total / this.limit);
        },
        nums() {
            let arr = [];
            for (let i = this.numRange.min; i <= this.numRange.max; i++) {
                arr.push(i);
            }
            return arr;
        },
        numRange() {
            // 拿到最小页。当前页减去最大页数。/ 2 是为了选中的那一项会在中间
            let min = Math.floor(this.current - this.visiableNumber / 2);
            if (min < 1) {
                min = 1;
            }

            // 拿到最大页码，
            let max = min + this.visiableNumber - 1;

            // 如果最大页码大于最大显示的分页数，让最大页码等于这个最大分页数
            if (max >= this.pagerNumber) {
                max = this.pagerNumber;

                // 不知道当时为什么加上了这局代码
                // min = this.pagerNumber - this.visiableNumber + 1;
            }

            console.log(min, max);
            return { min, max };
        },
    },
    methods: {
        handClick(newPager) {
            if (newPager < 1) {
                newPager = 1;
            }
            if (newPager >= this.pagerNumber) {
                newPager = this.pagerNumber;
            }
            if (newPager === this.current) {
                return;
            }
            this.$emit("pageChange", newPager);
        },
    },
};
</script>

<style lang="less" scoped>
@import "~@/styles/variable.less";

.pager-container {
    user-select: none;
    display: flex;
    justify-content: center;
    margin: 20px 0;

    a {
        color: @primary;
        margin: 0 6px;
        cursor: pointer;

        &.numItem {
            text-align: center;
        }

        &.active {
            color: @words;
            cursor: default;
        }

        &.disabled {
            color: @lightWords;
            cursor: not-allowed;
        }
    }
}
</style>
